<cfscript>
	ui = "orders";
	view = "grid";
	obj = "order";
	statuses = request.Base.getOrderStatuses();
	institutionTypes = request.Base.getInstitutionTypes();
	origins = request.Base.getOrigins();
	defaultFilter = {institutionTypes = "", statuses = statuses[1]["value"]};
	filter = request.Base.getUIFilter(ui = ui, defaultFilter = defaultFilter);
</cfscript>

<script type="text/javascript">
<!--	
	<cfoutput>
		var ui = "#ui#";
		var view = "#view#";
		var obj = "#obj#";
		var origins = #SerializeJSON(origins)#;
		var statuses = #SerializeJSON(statuses)#;
		var institutionTypes = #SerializeJSON(institutionTypes)#;
		var defaultFilter = #SerializeJSON(defaultFilter)#;
		var filter = #SerializeJSON(filter)#;
	</cfoutput>
	
	var originFilter = function(element) {
		element.kendoDropDownList({
			dataSource: ["CFC", "CSAC"],
			optionLabel: "Select..."
		})
	}
	
	var statusFilter = function(element) {
		element.kendoDropDownList({
			dataSource: ["New", "On Hold", "Approved", "Staged", "Shipped", "Cancelled"],
			optionLabel: "Select..."
		})
	}
	
	var institutionTypeFilter = function(element) {
		element.kendoDropDownList({
			dataSource: ["High School", "College University", "Other"],
			optionLabel: "Select..."
		})
	}
	
	var gridColumnsConfig = [
		//{field: "order_id", title: "ID", template: "<a href='?ui=order&Order_ID=#=order_id#'>#=order_id#</a>", width: 70},
		{field: "order_id", title: "ID", width: 70, template: function(dataItem) {
			console.log(dataItem);
			if (dataItem.status == "Approved" || dataItem.status == "Staged" || dataItem.status == "Shipped" || dataItem.status == "Cancelled") {
				return "<a href='?ui=order&Order_ID=" + dataItem.order_id + "&view=detail'>" + dataItem.order_id + "</a>";
			} else {
				return "<a href='?ui=order&Order_ID=" + dataItem.order_id + "'>" + dataItem.order_id + "</a>";
			}
		}},
		{field: "status", title: "Status", width: 100, filterable: {ui: statusFilter}},
		{field: "order_date", title: "Ordered", format: "{0:M/d/yy}", width: 110, filterable: {ui: "datepicker"}},
		{field: "approved_date", title: "Approved", format: "{0:M/d/yy}", width: 110, filterable: {ui: "datepicker"}},
		{field: "shipped_date", title: "Shipped", format: "{0:M/d/yy}", width: 110, filterable: {ui: "datepicker"}},
		{field: "institution", title: "Institution", attributes: {"nowrap": "nowrap"}, filterable: false, template: function(dataItem) {
			if (dataItem.institution_type == "College University") {
				return dataItem.college_university;
			} else if (dataItem.institution_type == "High School") {
				return dataItem.high_school;
			} else {
				return dataItem.institution;
			}
		}},
		/*{title: "Institution2", attributes: {"nowrap": "nowrap"}, filterable: true, template: function(dataItem) {
			if (dataItem.institution_type == "College University") {
				return dataItem.college_university;
			} else if (dataItem.institution_type == "High School") {
				return dataItem.high_school;
			} else {
				return dataItem.institution;
			}
		}},*/
		{field: "institution_type", title: "Institution Type", filterable: {ui: institutionTypeFilter}},
		/*{field: "count_ordered", title: "Item Count", template: function(dataItem) {
			return dataItem.count_ordered;
		}, width: 130},
		{field: "count_shipped", title: "Qty Shipped", template: function(dataItem) {
			return dataItem.quantity_ordered;
		}, width: 130},*/
		{field: "wms_order_id", title: "Origin", template: function(dataItem) {
			if (dataItem.wms_order_id > 0) {
				return "CFC";
			} else {
				return "CSAC";
			}
		}, 
		width: 100,
		filterable: {ui: originFilter}
		//filterable: false
		},
		{field: "next_workshop_date", title: "Workshop Date", format: "{0:M/d/yy}", width: 110},
	]

	<!--- var resizeElements = function() {
		// window
		var windowHeight = $(window).height();
		console.log("windowHeight");
		console.log(windowHeight);
		var windowScrollTop = $(window).scrollTop();
		//console.log("windowScrollTop");
		//console.log(windowScrollTop);
		//grid
		var grid = $("#grid");
		var gridHeight = grid.height();
		console.log("gridHeight");
		console.log(gridHeight);
		var gridPosition = grid.position();
		console.log("gridPosition");
		console.log(gridPosition);
		var gridOffset = grid.offset();
		console.log("gridOffset");
		console.log(gridOffset);
		// buttonBar
		var buttonBar = $("#buttonBar");
		var buttonBarHeight = buttonBar.height();
		//console.log("buttonBarHeight");
		//console.log(buttonBarHeight);
		var buttonBarPosition = buttonBar.position();
		//console.log("buttonBarPosition");
		//console.log(buttonBarPosition);
		var buttonBarOffset = buttonBar.offset();
		//console.log("buttonBarOffset");
		//console.log(buttonBarOffset);
		var bbGridHeight = windowHeight - (buttonBarOffset.top + buttonBarHeight);
		//console.log("bbGridHeight");
		//console.log(bbGridHeight);
		
		var gGridHeight = windowHeight - gridPosition.top - 40;
		console.log("gGridHeight");
		console.log(gGridHeight);
		
		if (windowScrollTop >= (100 + gridHeight) - windowHeight) {
			//fix the positon and leave the green bar in the viewport
			console.log("fix position");
			/*el.css({
				position: "fixed",
				left: el.offset().left,
				bottom: 0
			});*/
		}
		else {
			// return element to normal flow
			//console.log("remove grid.style");
			//el.removeAttr("style");
		}
	} --->

	$(function() {
		$("#grid").kendoGrid({
			dataSource: getGridDataSourceConfig(obj),
			columns: gridColumnsConfig,
			sortable: {allowUnsort: false},
			scrollable: true,
			//pageable: gridPageableConfig,
			resizable: true,
			filterable: gridFilterableConfig,
			dataBound: function(e) {gridOnDataBound(this)},
			filterMenuInit: function(e) {
				//alert("filterMenuInit");
			}
		})
		
	});
//-->
</script>

<style type="text/css">
	.k-grid-filter.k-state-active {
		background-color: orange;	
	}
</style>

<cfoutput>

	<div id="buttonBar" class="row" style="margin-bottom: 10px;">
		<div class="col-lg-12">
			<a href="#script_name#?ui=order&Order_ID=0" class="btn btn-info">New&nbsp;order</a>
			<a id="filterLink" href="##" class="btn btn-info" onclick="toggleFilter('filters')">Show filters</a>
			<div class="btn-group">
				<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Actions</button>
				<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
				<ul class="dropdown-menu">
					<li><a href="?action=export&collection=#ui#" target="_new">Export</a></li>
				</ul>
			</div>
			<span class="pull-right"><span id="countLabel" class="badge"></span><!--- <cfif StructKeyExists(filter, "filter")>&nbsp;<span class="label label-warning">Filtered</span></cfif> ---></span>
		</div>
	</div>
	
	<cfform name="filterForm" id="filterForm" action="#script_name#" method="post">
		<input type="hidden" name="ui" value="#ui#">
		<input type="hidden" name="defaultFilter" value="#request.Base.cfmlToWDDX(defaultFilter)#" />
		<div id="filters" class="well well-small" style="display: none;">
			<table cellpadding="6">
				<tr valign="top">
					<td>
						<label>Institution Types</label>
						<select name="institutionTypes" class="form-control" size="7" multiple="yes" required="yes" message="Institution Types filter is required">
							<option value=""<cfif filter.institutionTypes eq ""> selected</cfif>>All</option>
							<cfloop index="i" from="1" to="#ArrayLen(institutionTypes)#">
								<option value="#institutionTypes[i].value#"<cfif ListFind(filter.institutionTypes, institutionTypes[i].value) gt 0> selected</cfif>>#institutionTypes[i].text#</option>
							</cfloop>
						</select>
					</td>
					<td>
						<label>Statuses</label>
						<select name="statuses" class="form-control" size="7" multiple="true" required="yes" message="Statuses filter is required">
							<option value=""<cfif filter.statuses eq ""> selected</cfif>>All</option>
							<cfloop index="i" from="1" to="#ArrayLen(statuses)#">
								<option value="#statuses[i].value#"<cfif ListFind(filter.statuses, statuses[i].value) gt 0> selected</cfif>>#statuses[i].text#</option>
							</cfloop>
						</select>
					</td>
					<!--- <td>
						<label>Origins</label>
						<select name="origins" class="form-control" size="1" multiple="false" required="yes" message="Origins filter is required">
							<option value=""<cfif filter.origins eq ""> selected</cfif>>All</option>
							<cfloop index="i" from="1" to="#ArrayLen(origins)#">
								<option value="#origins[i].value#"<cfif ListFind(filter.origins, origins[i].value) gt 0> selected</cfif>>#origins[i].text#</option>
							</cfloop>
						</select>
					</td> --->
				</tr>
				<tr>
					<td colspan="5">
						<button type="submit" name="action" value="filter" class="btn btn-info">Apply</button> <button type="submit" name="action" value="resetFilter" class="btn btn-info">Clear</button>
					</td>
				</tr>
			</table>
		</div>
	</cfform>
	
	<div id="loading">
		<div class="progress progress-striped active" style="margin-left: 25%; margin-right: 25%; margin-top: 40px;">
			<div class="progress-bar progress-bar-info"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
			</div>
		</div>
	</div>
	<div id="grid" style="display: none;"></div>
	<div id="noRecs" class="alert alert-info" style="display: none;">No orders</div>

</cfoutput>